Wiederverwendbare Komponenten sind die wesentlichen Aspekte der Dart-Programmiersprache, auf der Flutter basiert. Sowohl Dart als auch Flutter sind stark von den Prinzipien der objektorientierten Programmierung beeinflusst.
Mit den wiederverwendbaren Komponenten können wir einfach ein Widget definieren und ein anderes Widget wie eine Eltern-Kind-Beziehung darin einbetten. Auf diese Weise können wir die gemeinsamen Eigenschaften problemlos zwischen einer Gruppe von Widgets teilen und die Lesbarkeit der UI-Codebasis aufrechterhalten.
Lassen Sie uns ein einfaches Beispiel verwenden, um dieses Konzept besser zu verstehen. Angenommen, Sie möchten eine benutzerdefinierte Schaltflächenkomponente erstellen, die in jedem Teil Ihrer Flutter-Anwendung wiederverwendet werden kann.
Zu diesem Zweck definieren wir eine neue Klasse, die die Klasse „StatefulWidget“ erweitert. Unten finden Sie den Codeausschnitt des „CustomButton“-Widgets.
„Pfeil
import 'package:flutter/material.dart';
Klasse CustomButton erweitert StatefulWidget {
endgültiger String-Text;
endgültige Farbe;
final VoidCallback onPressed;
const CustomButton(
{erforderlich this.text, erforderlich this.color, erforderlich this.onPressed});
@override
State createState() => _CustomButtonState();
}
Klasse _CustomButtonState erweitert State {
@override
Widget-Build(BuildContext-Kontext) {
return ElevatedButton(
onPressed:widget.onPressed,
Stil:ElevatedButton.styleFrom(
primär:widget.color,
),
Kind:Text(widget.text),
);
}
}
„
Sehen wir uns nun an, wie man diesen „CustomButton“ verwendet. Angenommen, wir haben eine „MyApp“-Klasse, die die „StatelessWidget“-Klasse erweitert. Wir müssen lediglich eine Instanz des „CustomButton“-Widgets erstellen und die erforderlichen Parameter übergeben.
„Pfeil
import 'package:flutter/material.dart';
import 'package:flutter_training_app/CustomButton.dart';
Klasse MyApp erweitert StatelessWidget {
const MyApp({Key? key}):super(key:key);
@override
Widget-Build(BuildContext-Kontext) {
return MaterialApp(
Zuhause:Gerüst(
appBar:AppBar(
Titel:Text('Meine App'),
),
Körper:Mitte(
Kind:CustomButton(
Text:„Klick mich“,
Farbe:Farben.blau,
onPressed:() {
// Mach hier etwas.
},
),
),
),
);
}
}
„
Das ist es! Wir haben mit der Zusammensetzung des Widgets erfolgreich eine wiederverwendbare Komponente erstellt und verwendet. Mit dieser Technik können wir die Wiederverwendbarkeit und Wartbarkeit des Codes unserer Flutter-Benutzeroberfläche verbessern.
